import React, { useState } from 'react'
import "./Spec.scss"
import { Radio } from 'antd'
import { RadioChangeEvent } from 'antd/lib/radio';
const radioStyle = {
    display: 'block',
    height: '30px',
    lineHeight: '30px',
};
const Spec = () => {
    const [active, setActive] = useState<number>(1)
    const onChange = (e: RadioChangeEvent) => {
        setActive(Number(e.target.value))
    }
    return <div className="im_spec">
        {/* <div className="im_spec_item">
            <span className="im_spec_item_span">选择</span>
            <span className="im_spec_item_span">格式</span>
            <span className="im_spec_item_span">像素</span>
            <span className="im_spec_item_span">尺寸</span>
        </div> */}
        <Radio.Group onChange={onChange} value={active}>
            <Radio style={radioStyle} value={1} className={`im_spec_item ${active === 1 ? 'active' : ''}`}>
                <span className="im_spec_item_span">JPG</span>
                <span className="im_spec_item_span">中 1000*600</span>
                <span className="im_spec_item_span">33*10cm（72dpi）</span>
            </Radio>
            <Radio style={radioStyle} value={2} className={`im_spec_item ${active === 2 ? 'active' : ''}`}>
                <span className="im_spec_item_span">JPG</span>
                <span className="im_spec_item_span">中 1000*600</span>
                <span className="im_spec_item_span">33*10cm（72dpi）</span>
            </Radio>
            <Radio style={radioStyle} value={3} className={`im_spec_item ${active === 3 ? 'active' : ''}`}>
                <span className="im_spec_item_span">JPG</span>
                <span className="im_spec_item_span">中 1000*600</span>
                <span className="im_spec_item_span">33*10cm（72dpi）</span>
            </Radio>

        </Radio.Group>
    </div>
}

export default Spec